<template>
  <view class="time-range">
    <uni-datetime-picker 
      type="datetime" 
      v-model="startTime" 
      @change="onStartTimeChange" 
      placeholder="选择起始时间" 
    />
    <text class="separator">-</text>
    <uni-datetime-picker 
      type="datetime" 
      v-model="endTime" 
      @change="onEndTimeChange" 
      placeholder="选择结束时间" 
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
		datetimerange: null,
      startTime: null,  // 保存起始时间
      endTime: null,    // 保存结束时间
    };
  },

  methods: {
    // 起始时间更改处理
    onStartTimeChange(e) {
      console.log("选择的起始时间:", e.detail.value);
      this.startTime = e.detail.value;
    },

    // 结束时间更改处理
    onEndTimeChange(e) {
      console.log("选择的结束时间:", e.detail.value);
      this.endTime = e.detail.value;
    }
  }
};
</script>

<style lang="scss">
.time-range {
  display: flex;
  align-items: center;
  gap: 10px;

  .separator {
    font-size: 16px;
    color: #333;
  }
}
</style>
